<template>
    <el-aside
    :width="$store.state.isCollapse ? '64px':'200px'"
      style="
        min-height: 101vh;
        margin-left: -10px;
        margin-top: -10px;
        background-color: #001529;
      "
    >
      <div
        style="
          height: 60px;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <img src="../assets/img/d988c6f217f13bb09dd043bd93d02f8b044837b11ee89-a1I0MZ.png" class="small" alt="" />
        <transition name="el-fade-in-linear">
          <span style="margin-left: 5px;font-size: 20px;" v-show="!$store.state.isCollapse"><i style="color:aqua"><b>pigmall</b></i></span>
        </transition>
      </div>
      <el-menu
        :collapse="$store.state.isCollapse"
        router
        text-color="rgba(255,255,255,0.65)"
        style="border: none"
        active-text-color="#fff"
        background-color="#001529"
        :default-active="$route.path"
      >
        <el-menu-item  v-if="user.role==='admin'" index="/Adminhome">
          <el-icon><House /> </el-icon>
          <template #title>系统首页</template>
        </el-menu-item>
        <el-menu-item v-if="user.role==='seller'" index="/sellerHome">
          <el-icon><House /> </el-icon>
          <template #title>商家首页</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminTypeInfo" >
          <el-icon><Coin /></el-icon>
          <template #title>商品类型</template>
        </el-menu-item>
        <el-menu-item v-if="user.role==='admin'" index="/AdminSellerInfo" >
          <el-icon><OfficeBuilding /></el-icon>
          <template #title>店铺信息</template>
        </el-menu-item>
        <el-menu-item v-if="user.role==='admin'" index="/AdminUserInfo" >
          <el-icon><User /></el-icon>
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item v-if="user.role==='admin'" index="/AddressInfo" >
          <el-icon><Location /></el-icon>
          <template #title>地址管理</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminGoodsInfo" >
          <el-icon><Goods /></el-icon>
          <template #title>商品信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminManage" >
          <el-icon><Help /></el-icon>
          <template #title>管理员信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminCollect" >
          <el-icon><Star /></el-icon>
          <template #title>收藏信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminNotice" >
          <el-icon><Bell /></el-icon>
          <template #title>公告信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminShop" >
          <el-icon><ShoppingCart /></el-icon>
          <template #title>购物信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='admin'" index="/AdminOrder" >
          <el-icon><Tickets /></el-icon>
          <template #title>订单信息</template>
        </el-menu-item>
        <el-menu-item  v-if="user.role==='seller'" index="/sellerGoods" >
          <el-icon><User /></el-icon>
          <template #title>商品信息</template>
        </el-menu-item>
        <el-menu-item  index="/personInfo" >
          <el-icon><User /></el-icon>
          <template #title>个人信息</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </template>
  
  
  <script>
  
  export default{
  
    data(){
      return{
        user:this.$store.state.user
      }
    },
    created(){
 
    }
  }
  
  </script>
  
  <style>
  .el-menu--inline{
    background-color: #000c17;
  }
  .el-menu--inline .el-menu-item {
    margin-left: 13px;
    height: 50px;
    line-height: 50px; 
    background-color: #000c17;
  }
  .el-menu-item:hover,.el-sub-menu__title:hover{
    color: #fff !important;
  }
  .el-menu-item.is-active{
    background-color: #1890ff;
    border-radius: 5px;
    margin: 4px;
  }
  .el-menu-item{
    margin: 4px;
    height: 50px;
    line-height: 50px;
  }
  .el-sub-menu__title{
    margin: 4px;
    height: 50px;
    line-height: 50px;
  }
  .el-menu--inline .el-menu-item.is-active{
    padding-left: 48px !important;
  }
  .el-aside{
    transition: width .3s;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
  }
  .small{
    width: 50px;
    height: auto;
  }
  </style>